<script setup lang="ts">
import { ref, watch } from 'vue'

import { useVbenModal } from '@vben/common-ui'

import { Table } from 'ant-design-vue'

import { getNeedPurchaseList } from '#/api/spuBom'

import purchase_info from '../purchase_info.vue'
// 定义组件props并获取props引用
const props = defineProps<{
  data: any
}>()

const NeedPurchaseList = ref([])

// 监听data变化，更新表格数据
watch(
  () => props.data,
  (newData) => {
    if (newData) {
      initData(props.data.id)
    }
  },
  { immediate: true },
)

const columns: any = ref([
  {
    title: 'BOM信息',
    resizable: true,
    children: [
      {
        title: '大类',
        dataIndex: 'bom_type',
        key: 'bom_type',
        align: 'center',
        resizable: true,
      },
      {
        title: 'BOM类型',
        dataIndex: 'bom_name',
        key: 'bom_name',
        align: 'center',
        resizable: true,
      },
      {
        title: '预计用量',
        dataIndex: 'single_piece',
        key: 'single_piece',
        align: 'center',
        resizable: true,
      },
      {
        title: '损耗',
        dataIndex: 'loss',
        key: 'loss',
        align: 'center',
        resizable: true,
      },
    ],
  },
  {
    title: '生产用量',
    resizable: true,
    children: [
      {
        title: '唛架用量',
        dataIndex: 'marker_single_piece',
        key: 'marker_single_piece',
        align: 'center',
        resizable: true,
      },
      {
        title: '实际用量',
        dataIndex: 'actual_single_piece',
        key: 'actual_single_piece',
        align: 'center',
        resizable: true,
      },
    ],
  },
  {
    title: '实际面料',
    resizable: true,
    children: [
      {
        title: '面料名称',
        dataIndex: 'material_name',
        key: 'material_name',
        align: 'center',
        resizable: true,
        ellipsis: true,
      },
      {
        title: '本次供应商',
        dataIndex: 'SupplyNa',
        key: 'SupplyNa',
        align: 'center',
        resizable: true,
      },
      {
        title: '本次单价',
        dataIndex: 'price',
        key: 'price',
        align: 'center',
        resizable: true,
      },
      {
        title: '单位',
        dataIndex: 'unit',
        key: 'unit',
        align: 'center',
        resizable: true,
      },
    ],
  },
  {
    title: '需求量（系统）',
    dataIndex: 'need_num',
    key: 'need_num',
    align: 'center',
    resizable: true,
  },
  {
    title: '已下数量',
    dataIndex: 'scope',
    key: 'scope',
    align: 'center',
    resizable: true,
  },
  {
    title: '已收数量',
    dataIndex: 'shou_num',
    key: 'shou_num',
    align: 'center',
    resizable: true,
  },
  {
    title: '已发数量',
    dataIndex: 'send_num',
    key: 'send_num',
    align: 'center',
    resizable: true,
  },
])
function initData(id: any) {
  console.log(id)
  const param = {
    bomId: id,
  }
  getNeedPurchaseList(param).then((response) => {
    NeedPurchaseList.value = response.data.data
  })
}

const [purchase_infoModal, purchase_infoModalApi] = useVbenModal({
  connectedComponent: purchase_info,
})

function openModel(record: any) {
  purchase_infoModalApi.setData({ data: record }).open()
}

function refresh() {
  initData(props.data.id)
}
</script>

<template>
  <Table @resize-column="(w: any, col: any) => (col.width = w)" class="w-full" :scroll="{ x: '100%', y: 'calc(60vh)' }" bordered size="small" :data-source="NeedPurchaseList" :columns="columns" :pagination="false">
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'scope'">
        <template v-if="record.material_type == 4 || (record.material_sku_id == 0 && record.purchase_num <= 0)">
          {{ record.purchase_num }}
        </template>
        <template v-else-if="record.sku_id > 0 || record.purchase_num > 0">
          <div style="color: #409eff" @click="openModel(record)">
            <u>{{ record.purchase_num }}</u>
          </div>
        </template>
      </template>
    </template>
  </Table>
  <purchase_infoModal @refresh="refresh()" />
</template>

<style scoped></style>
